<template>
	<view>
		<vk-uni-pay
			ref="vkPay"
			:polling="vkPay.polling"
			:status.sync="vkPay.status"
			:page-show="vkPay.pageShow"
			:return-url="vkPay.returnUrl"
			:code-url.sync="vkPay.codeUrl"
			:query-payment-action="vkPay.queryPaymentAction"
		></vk-uni-pay>
		<!-- #ifdef H5 -->
		<!-- 二维码支付弹窗开始 -->
		<view class="pay-qrcode-popup" v-if="vkPay.status < 2 && vkPay.codeUrl">
			<view class="pay-qrcode-popup-mask" @click="cancelPay"></view>
			<view class="pay-qrcode-popup-content">
				<vk-uni-qrcode :text="vkPay.codeUrl" :size="450"></vk-uni-qrcode>
				<view class="pay-qrcode-popup-info">
					<view>
						<text class="pay-qrcode-popup-info-fee">
							{{ (form1.total_fee / 100).toFixed(2) }}
						</text>
						<text>元</text>
					</view>
					<view v-if="form1.provider == 'wxpay'">请用微信扫码支付</view>
					<view v-else-if="form1.provider == 'alipay'">请用支付宝扫码支付</view>
				</view>
				<button v-if="vkPay.status == 1" type="primary" @click="queryPayment">
					我已完成支付
				</button>
			</view>
		</view>
		<!-- #endif -->
		<!-- 外部浏览器H5支付弹窗确认开始 -->
		<view class="pay-confirm-popup" v-if="vkPay.confirmShow">
			<view class="pay-confirm-popup-content">
				<view class="pay-confirm-popup-title">请确认支付是否已完成</view>
				<view><button type="primary" @click="queryPayment">已完成支付</button></view>
				<view class="pay-confirm-popup-refresh">
					<button type="default" @click="afreshPayment">支付遇到问题，重新支付</button>
				</view>
				<view class="pay-confirm-popup-cancel" @click="vkPay.confirmShow = false">
					暂不支付
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "pay-balance-recharge",
	props: {},
	data() {
		return {
			vkPay: {
				/**
				 * 查询支付状态的云函数配置
				 * 如果是非路由框架，则action为字符串，值为云函数名称
				 * 如果是路由框架，则按下方配置填写
				 */
				queryPaymentAction: {
					name: "vk-pay", // 云函数名称
					action: "pay/queryPayment", // 路由模式下云函数地址
					actionKey: "action", // 路由模式下云函数地址的识别key
					dataKey: "data" // 路由模式下云函数请求参数的识别key
				},
				// PC支付的付款二维码地址
				codeUrl: "",
				// 当前支付状态 0:等待发起支付 1:支付中 2:已支付
				status: 0,
				// 当前页面是否显示
				pageShow: true,
				// 启用轮询检测订单支付状态（仅h5支付有效）
				polling: true,
				// 微信手机外部浏览器H5支付时有效，必须是http或https开头的绝对路径，且在微信H5支付配置的域名白名单中。你还需要将此H5域名加入uniCloud白名单
				// 如果此值为空，则默认使用返回当前页面，返回的页面url参数会带上confirmShow=true&out_trade_no=实际订单号
				returnUrl: "",
				// 确认已支付的弹窗开关（微信手机外部浏览器H5支付时有效）
				confirmShow: false
			},
			// 表单请求数据
			form1: {
				provider: "wxpay",
				out_trade_no: "",
				openid: "", // 公众号支付必传，小程序支付可以不传
				total_fee: "", // 金额
				type: "recharge" // 标记为余额充值
			}
		}
	},
	methods: {
		// 发起支付
		createPayment(obj = {}) {
			let that = this
			let { form1, vk } = that
			let { total_fee, provider, total_balance } = obj
			if (!provider) {
				// #ifdef MP-WEIXIN
				provider = "wxpay"
				// #endif
				// #ifdef MP-ALIPAY
				provider = "alipay"
				// #endif
			}
			form1.provider = provider
			form1.total_fee = total_fee
			form1.total_balance = total_balance

			that.$refs.vkPay.createPayment({
				// 如果是非路由框架，则外层action不再是json，而为字符串，值为云函数名称，如 action: "你的云函数名称"
				// 如果是路由框架，则按下方配置填写
				action: {
					name: "router", // 云函数名称
					action: "client/order.createPaymentForBalanceRecharge", // 路由模式下云函数地址
					actionKey: "$url", // 路由模式下云函数地址的识别key(注意VK路由框架下,此值为$url)
					dataKey: "data" // 路由模式下云函数请求参数的识别key
				},
				// 请求数据
				data: form1,
				// 成功回调
				success: res => {
					console.log("paySuccess", res)
					that.form1.out_trade_no = res.out_trade_no
					//vk.toast("支付成功", "success");
					that.queryPayment()
				},
				// 失败回调
				fail: res => {
					if (res.failType === "create") {
						// 创建支付失败时提示
						vk.alert(res.msg)
					} else if (res.failType === "request") {
						// 请求支付失败时提示
						vk.toast("请求支付失败")
					} else if (res.failType === "result") {
						// 支付结果失败时提示
						vk.toast("支付失败")
					}
				},
				// 取消回调
				cancel: res => {
					vk.toast("用户取消支付")
				}
			})
		},
		// 支付状态查询
		queryPayment() {
			let that = this
			// 支付状态查询你可以直接查你的订单表，看订单是否已支付（因为最终判定用户是否支付成功应该以你的订单表为准）
			// 如果vkPay.queryPayment接口返回支付成功，但你的订单表查询到未支付，代表你的异步回调函数写的有问题。
			that.$refs.vkPay.queryPayment({
				title: "查询中...",
				data: {
					out_trade_no: that.form1.out_trade_no,
					await_notify: true
				},
				needAlert: true,
				success: data => {
					that.vkPay.status = 2 // 标记为已支付
					that.vkPay.confirmShow = false // 关闭确认弹窗（微信H5支付有弹窗确认）
					vk.toast(data.msg)
					vk.myfn.user.getMyInfo() // 更新用户信息(余额)
					vk.navigateTo("/pages/user/wallet/list")
				},
				fail: (res = {}) => {
					if (res.msg === "订单已退款") {
						that.vkPay.confirmShow = false // 关闭确认弹窗（微信H5支付有弹窗确认）
					}
				}
			})
		},
		cancelPay() {
			let that = this
			that.vkPay.status = 0
			that.vkPay.codeUrl = ""
		}
	}
}
</script>

<style lang="scss" scoped>
/* 外部浏览器H5支付弹窗确认开始 */
.pay-confirm-popup {
	position: fixed;
	width: 100vw;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	.pay-confirm-popup-content {
		width: 550rpx;
		margin: 50% auto 0 auto;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 40rpx;
		.pay-confirm-popup-title {
			text-align: center;
			padding: 20rpx 0;
			margin-bottom: 30rpx;
		}
		.pay-confirm-popup-refresh {
			margin-top: 20rpx;
		}
		.pay-confirm-popup-cancel {
			margin-top: 20rpx;
			text-align: center;
		}
	}
}
/* 外部浏览器H5支付弹窗确认结束 */

/* 二维码支付弹窗开始 */
.pay-qrcode-popup {
	position: fixed;
	width: 100vw;
	top: 0;
	bottom: 0;
	z-index: 920;
	.pay-qrcode-popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.pay-qrcode-popup-content {
		position: relative;
		width: 500rpx;
		margin: 40% auto 0 auto;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 40rpx;
		box-sizing: content-box;
		text-align: center;
		.pay-qrcode-popup-info {
			text-align: center;
			padding: 20rpx;
			.pay-qrcode-popup-info-fee {
				color: red;
				font-size: 60rpx;
				font-weight: bold;
			}
		}
	}
}
/* 二维码支付弹窗结束 */
</style>
